<!--
 * @Author       : xiangmin
 * @File         : 搜索区域按钮
 * @Date         : 2024-09-19 14:42:32
 * @LastEditors  : xiangmin
 * @LastEditTime : 2024-09-19 15:15:31
-->
<template>
	<a-col class="flex flex-1 justify-end items-start">
		<a-space>
			<a
				v-if="expandVisible"
				@click="expand = !expand"
			>
				{{ expand ? '收起' : '展开' }}
				<caret-down-outlined :class="[expand && 'rotate-180', 'transition-transform']" />
			</a>
			<a-button
				v-if="search?.reset"
				:icon="resetIcon"
				:loading="search.loading"
				@click="search?.reset()"
				>重置</a-button
			>
			<a-button
				v-if="search?.query"
				:loading="search.loading"
				:icon="searchIcon"
				type="primary"
				@click="search?.query()"
				>搜索</a-button
			>
		</a-space>
	</a-col>
</template>

<script setup lang="ts">
import { CaretDownOutlined, RedoOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'

defineProps<{
	expandVisible: boolean
	search?: {
		query?: () => void
		reset?: () => void
		loading?: boolean
	}
}>()
const expand = defineModel<boolean>('expand', { default: true, required: false })
const searchIcon = h(SearchOutlined)
const resetIcon = h(RedoOutlined)
</script>
